<template>
    <div class="boxh bordert">
        <div class="ttitle">订阅历史</div>
        <div class="lists">
            <div class="histable">
                <table class="tableth" width="90%" align='center' border="1px solid" bordercolor="#D9D9D9" cellspacing="0" rules=rows style="border-collapse:collapse;">
                    <tr class="histitle colortitle">
                    <th>时间</th>
                    <th>轮次</th>
                    <th>主队</th>
                    <th>&nbsp;</th>
                    <th>客队</th>
                    <th>付费金额</th>
                    <th>订阅人数</th>
                    <th>操作</th>
                    </tr>
                    <tr v-for="(item, index) in history" :key="index">
                    <td class="colorlis1" align='center' valian='middle'>{{ item.matchTime }}</td>
                    <td align='center' valian='middle'>{{ item.matchRound }}轮</td>
                    <td class="colorlis1 posir" style="width:240px" align='center' valian='middle'><img class="qdimg posia" style="left:0;bottom:7px;" :src="item.zranksPhoto" alt="">{{ item.zName }}</td>
                    <td align='center' valian='middle'>VS</td>
                    <td class="colorlis1 posir" style="width:240px" align='center' valian='middle'>{{ item.kName }}<img class="qdimg posia" style="right:0;bottom:7px;" :src="item.kranksPhoto" alt=""></td>
                    <td style='color:#FF0000;' align='center' valian='middle'>￥{{ item.money }}</td>
                    <td align='center' valian='middle'>{{ item.matchSubscribe }}</td>
                    <td align='center' valian='middle'><div class="ck pointer" :data-id="item.id" @click="chuanid($event)">查看</div></td>
                    </tr>
                    <!-- <tr>
                    <td>row 2, cell 1</td>
                    <td>row 2, cell 2</td>
                    </tr> -->
                </table>
            </div>
            <popupck v-show="isPopupVisibleCk" @closeCk="closePopupCk"></popupck>
            <div style="height:500px"></div>
        </div>
    </div>
</template>
<script>
import popupck from '../popup/popupck'
export default {
  name: 'history',
    components: {
        popupck
    },
  data () {
    return {
        history:[],
        fxlist:'',
        isPopupVisibleCk: false,
    }
  },
  created() {
    
  },
  mounted() {
      this.huoqulishi()
  },
  methods: {
    closePopupCk(){
      this.isPopupVisibleCk = false
    },
      async huoqulishi() {
          var id = ''
          id = JSON.parse(window.localStorage.getItem('yonghuxinxi')).id
          console.log(id)
          var uid = new FormData()
          uid.set('userId',id)
          const { data: res } = await this.$http.post('app/zqOrder/getAZqMatchAnalysis.do',uid)
        console.log(res)
        this.history = res.data
        if (res.code !== 0) return console.log('获取历史失败')
        console.log('获取历史成功')
      },
      chuanid(event) {
        var target = event.target || window.event.srcElement,
       //获取对应元素的id值
      id = target.getAttribute('data-id');
      for(var i=0; i<this.history.length; i++) {
        if(id==this.history[i].id) {
          this.fxlist = this.history[i]
        }
      }
      console.log(this.fxlist)
      var fxone = this.fxlist
      window.localStorage.setItem('anaone', JSON.stringify(fxone));
      this.isPopupVisibleCk = true

      // this.$router.push({
      //   name:'analyse',
      //   query: {
      //     anaone: fxone
      //   }
      // })
      }
  }
  }
</script>
<style lang="less" scoped>
@import "../../assets/css/index.css";
    .boxh {
        background-color: #fff;
        .lists {
            margin-top: 10px;
            .histable {
                .tableth {
                    margin: auto;
                    // color: #696969;
                    .histitle {
                    background-color: #F3F3F3;
                    height: 50px;
                }
                }
            }
        }
    }
    td {
    // border-top: 1px solid #D7D7D7;
    height: 50px;
}
.ck {
  height: 30px;
    line-height: 30px;
    width: 75px;
    border: 1px solid #408ED6;
    color:  #408ED6;
    border-radius:3px;
}
// .ckl {
//   color: #408ED6 !important;
//   text-decoration: none;
// }

</style>